<template>
  <el-select
    v-model="innerValue"
    :multiple="multiple"
    :placeholder="placeholder"
    :clearable="clearable"
    :filterable="filterable"
    :disabled="disabled"
    class="w-full"
  >
    <el-option
      v-for="item in options"
      :key="item.roleId"
      :label="item.roleName"
      :value="item[valueField]"
      :disabled="item.status == 1"
    />
  </el-select>
  
</template>

<script setup>
import { listRole } from "@/api/system/role"

const props = defineProps({
  modelValue: { type: [Array, String, Number, null], default: undefined },
  placeholder: { type: String, default: "请选择" },
  clearable: { type: Boolean, default: true },
  filterable: { type: Boolean, default: true },
  disabled: { type: Boolean, default: false },
  multiple: { type: Boolean, default: true },
  valueField: { type: String, default: 'roleId' }
})

const emit = defineEmits(["update:modelValue"]) 

const options = ref([])
const innerValue = ref()

watch(
  () => props.modelValue,
  (v) => {
    if (props.multiple) {
      innerValue.value = Array.isArray(v) ? v : []
    } else {
      innerValue.value = v
    }
  },
  { immediate: true }
)

watch(innerValue, (v) => emit("update:modelValue", v))

function loadRoles() {
  listRole({ pageNum: 1, pageSize: 1000 }).then(res => {
    options.value = res.rows || []
  })
}

onMounted(() => {
  loadRoles()
})
</script>

<style scoped>
</style>


